<template>
  <div style="background: #ccc;height: 500px;width: 500px;">
    <div class="m-num" style="width: 310px">
      <p class="u-num">{{ value[0] }}</p>
      <p class="u-num">{{ value[1] }}</p>
      <p class="u-num">{{ value[2] }}</p>
    </div>

    <NumSlider
      :min="min"
      :max="max"
      :initialValue="initialValue"
      :width="310"
      :disabled="false"
      :range="true"
      v-model="value"
      @change="onChange"
    />
  </div>
</template>

<script>
import NumSlider from '@/components/NumSlider.vue'
export default {
  components: {
    NumSlider,
  },
  data() {
    return {
      initialValue: [4, 8],
      value: [4, 4, 2],

      max: 10,
      min: 0,
    }
  },
  methods: {
    onChange(val) {
      console.log('change:', val)
      // val=[4,8]
      this.value = [val[0] - this.min, val[1] - val[0], this.max - val[1]]
    },
  },
}
</script>

<style lang="scss" scoped>
.m-num {
  display: flex;
  justify-content: space-between;
  .u-num {
    color: #333;
    font-size: 24px;
  }
}
</style>
